/** @format */

import {
  AlipayOutlined,
  DollarOutlined,
  WechatOutlined,
} from "@ant-design/icons";
import { Button } from "antd";
import classnames from "classnames";
import { FC } from "react";

interface Props {
  className?: React.HTMLAttributes<HTMLDivElement>["className"];
}

const PayTotal: FC<Props> = ({ className }) => {
  return (
    <div className={classnames("h-full w-[100px]", className)}>
      <div>
        <p className="text-sm text-gray-400">总计金额</p>
        <p className="mt-1 text-2xl">¥100</p>
      </div>
      <div className="flex flex-col w-full gap-3 mt-2">
        <Button
          type="primary"
          className="h-[40px] bg-green-500 hover:bg-green-600 text-white"
          icon={<WechatOutlined />}
        >
          微信支付
        </Button>
        <Button
          className="h-[40px]"
          type="primary"
          color="blue"
          icon={<AlipayOutlined />}
        >
          支付宝
        </Button>
        <Button className="h-[40px]" icon={<DollarOutlined />}>
          现金支付
        </Button>
      </div>
    </div>
  );
};

export default PayTotal;
